import { FC, useEffect, useState } from "react";
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, Spin } from 'antd';
import {useNavigate} from 'react-router-dom'
import { useRequest } from "ahooks";
import { UserLogin } from "../service";
import { REGISTE_PATHNAME ,QUESTION_PATHNAME} from "../concats";
import { SetUserToken } from "../utils";
import style from './pages.module.scss'
import classnames from 'classnames/bind'
const CBN = classnames.bind(style)

const LoginPages: FC = () => {
    const USERNAME_KEY = 'username'
    const PASSWORD_KEY = 'password'
    const nav = useNavigate()
    
    const SetLocal = (username:string,password:string)=>{
        localStorage.setItem(USERNAME_KEY,username)
        localStorage.setItem(PASSWORD_KEY,password)
    }

    const RemoveLocal = ()=>{
        localStorage.removeItem(USERNAME_KEY)
        localStorage.removeItem(PASSWORD_KEY)
    }
    const [form] = Form.useForm();
    useEffect(()=>{
        form.setFieldsValue({
            username:localStorage.getItem(USERNAME_KEY) || '',
            password:localStorage.getItem(PASSWORD_KEY) || ''
        })
    },[])

    //进行登录
    const {run:userLogin,loading} = useRequest((username:string,password:string)=>{
        return UserLogin({username,password})
    },{
        manual:true,
        onSuccess(data){
            console.log('登录成功',data)
            SetUserToken(data.token)
            nav(QUESTION_PATHNAME)
        }
    })

    const onFinish = (values: any) => {
       const {username,password,remember} = values
       if(remember){
            SetLocal(username,password)
       }else{
            RemoveLocal()
       }
       userLogin(username,password)
    };


    return <div className={CBN('LoginPages')}>
        <Spin tip = '登录中' className={CBN('login')} spinning = {loading}>
            <Form
                form={form}
                name="normal_login"
                className="login-form"
                initialValues={{ remember: true }}
                onFinish={onFinish}
            >
                <Form.Item
                    name="username"
                    rules={[{ required: true, message: '请输入用户名！' }]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入密码！' }]}
                >
                    <Input
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="请输入密码"
                    />
                </Form.Item>
                <Form.Item>
                    <Form.Item name="remember" valuePropName="checked" noStyle>
                        <Checkbox>记住我</Checkbox>
                    </Form.Item>
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                    <Button type="link" className="login-form-button" onClick={()=>{nav(REGISTE_PATHNAME)}}>
                        注册新用户
                    </Button>
                </Form.Item>
            </Form>
        </Spin>
    </div>
}

export default LoginPages